<template>
  <Modal v-model="dialogVisible" v-bind="params">
    <div slot="header">流程数据</div>
    <div>
      <codemirror :value="flowJsonData" :options="options" class="code" style="width:500px"></codemirror>
    </div>
  </Modal>

</template>

<script>
import "codemirror/lib/codemirror.css";
import { codemirror } from "vue-codemirror";

require("codemirror/mode/javascript/javascript.js");

export default {
  props: {
    data: Object,
  },
  data() {
    return {
      params: {
        hasCloseIcon: true,
        hasDivider: true,
        closeOnMask: true,
      },
      dialogVisible: false,
      flowJsonData: {},
      options: {
        mode: { name: "javascript", json: true },
        lineNumbers: true,
      },
    };
  },
  components: {
    codemirror,
  },
  methods: {
    init() {
      this.dialogVisible = true;
      this.flowJsonData = JSON.stringify(this.data, null, 4).toString();
    },
  },
};
</script>
